<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
	<style>
		body{
			width: 500px;
			height: 100000px;
			/* 背景尺寸：函数：contain； */
			background-size: contain;
			background-image: url(img/p_small_003.jpg);
			/* 背景图控制属性:滚动,背景图固定页面上fixed */
			background-attachment: fixed;
		}
		di v{
			width: 500px;
			height: 500px;
		backgr ound-color: #e4393c;
		background-image: url(img/p_small_003.jpg);
		/* 背景图小于空间【自动平铺】 去掉平铺 */
		background-repeat: no-repeat;
		backgr ound-repeat: repeat-x;
		backgro und-repeat: repeat-y;
		/* 背景尺寸,属性值：数值/百分比
		                   函数cover 等比例宽高【放大】图片覆盖整个容器
		                       contain等比例宽高【缩放】保证页面图片全部显示
		*/
	   border: 1px solid red;
		background-size: 20%;
        /* 背景定位：先决条件，背景图小于外围空间 功能：精灵图1定位 */
		background-position: bottom center;
		background-position: 80% 0;任意位置:数值px+
		}
	</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit dolorem impedit quo autem. Laborum rerum error itaque perferendis amet corporis accusantium exercitationem! Magnam laudantium sed ratione, consectetur velit dolorem tempora.
		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet itaque nihil accusantium nostrum odio. Aliquid, recusandae enim cupiditate quis perferendis corporis voluptates error officia vel possimus deserunt nostrum saepe veritatis.
		<!-- css背景：背景图，背景颜色 --区别：页面任意移动位置
		    html图片img              --区别：页面定死位置
		   子属性
		   background-color背景颜色：十六进制颜色值；
		    复合属性--省去子属性
			background；十六进制色值；
		 -->
		 <div></div>
	</body>
</html>